<template>
  <div class="SingerDetailsPage test-1">
    <div class="SingerDetailsPage-one">
      <div class="one-kuan-one">
        <img :src="DataOne.img1v1Url" alt="" />
      </div>
      <div class="one-kuan-two">
        <div class="text-one">{{ DataOne.name }}</div>
        <div class="text-two">{{ alias }}</div>
        <div class="text-three">
          <button class="atrive-two" @click="Collection(DataOne)">{{text}}</button>
        </div>
        <div class="text-four">
          单曲数：{{ DataOne.musicSize }}&nbsp;&nbsp;&nbsp;专辑数：{{
            DataOne.albumSize
          }}&nbsp;&nbsp;&nbsp;MV数：{{ DataOne.mvSize }}
        </div>
      </div>
    </div>
    <div class="SingerDetailsPage-two">
      <van-tabs v-model="active">
        <van-tab title="专辑" class="Page-two">
          <div
            class="Album-kuan"
            v-for="(item, index) in DataTwo"
            :key="index"
            @click="AlbumDetails(item.id)"
          >
            <div class="Album-img">
              <img :src="item.blurPicUrl" alt="" />
            </div>
            <div class="Album-text">
              <div class="Album-text-one">{{ item.name }}</div>
              <div class="Album-text-two">{{ publishTime[index] }}</div>
            </div>
          </div>
          <div class="pan" v-if="DataTwo.length == 0">没有数据</div>
          <div class="clear"></div>
        </van-tab>
        <van-tab title="MV" class="Page-two">
          <div
            class="MV-kuan"
            v-for="(item, index) in MVshuju"
            :key="index"
            @click="Videotiaozhuan(item.id)"
          >
            <div class="MV-img">
              <img :src="item.imgurl" alt="" />
            </div>
            <div class="MV-text">
              <div class="MV-text-one">{{ item.name }}</div>
            </div>
          </div>
          <div class="pan" v-if="MVshuju.length == 0">没有数据</div>
          <div class="clear"></div>
        </van-tab>
        <van-tab title="歌手详情" class="Page-two">
          <div class="jieshao-one">{{ jieshao.name }}介绍</div>
          <div class="jieshao-two">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ jieshao.briefDesc }}
          </div>
        </van-tab>
        <van-tab title="相似歌手" class="Page-two">
          <div
            class="beSimilar-kuan"
            v-for="(item, index) in beSimilar"
            @click="SingerDetailsPage(item.id)"
            :key="index"
          >
            <div class="beSimilar-img">
              <img :src="item.picUrl" alt="" />
            </div>
            <div class="beSimilar-text">
              <div class="beSimilar-text-one">{{ item.name }}</div>
            </div>
          </div>
          <div class="clear"></div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "SingerDetailsPage",
  data() {
    return {
      id: "",
      DataOne: [],
      DataTwo: [],
      publishTime: [],
      alias: "",
      active: 0,
      text: "收藏",
      jieshao: [],
      beSimilar: [],
      MVshuju: [],
    };
  },
  created() {
    this.id = this.$route.params.id;
    // this.SingerDetailsPage(this.id);
    // console.log("this.id==>", this.id);
    this.SingerDetailsPageqingqiu();
    this.SingerDetailsPageqingqiu1();
    this.SingerDetailsPageqingqiu2();
    this.SingerDetailsPageqingqiu3();
    this.SingerDetailsPageqingqiu4();
    this.Collectiontext(this.id);
  },
  methods: {
    Collectiontext(id) {
      let shuzu = JSON.parse(JSON.stringify(this.$store.state.collectionGeshou));
      // console.log("shuzu==>", shuzu);
      if (shuzu.length > 0) {
        for (let index = 0; index < shuzu.length; index++) {
          if (id == shuzu[index].id) {
            // console.log("id==>", id);
            // console.log(" shuzu[index].id==>", shuzu[index].id);
            this.text = this.$store.state.collectionGedanTextTwo;
            // return this.text;
            // console.log("this.text==>", this.text);
            break;
          }
        }
      }
      console.log("this.text==>", this.text);
    },
    Collection(e) {
      if (this.$store.state.ifEavr) {
        let shuzu = JSON.parse(
          JSON.stringify(this.$store.state.collectionGeshou)
        );
        if (shuzu.length == 0) {
          this.$store.state.collectionGeshou.push(e);
          Toast("收藏成功！！！");
          this.text = this.$store.state.collectionGedanTextTwo;
        }
        if (shuzu.length > 0) {
          for (let index = 0; index < shuzu.length; index++) {
            if (e.id == shuzu[index].id) {
              shuzu.splice(index, 1);
              this.$store.state.collectionGeshou = shuzu;
              Toast("取消成功！！！");
              this.text = this.$store.state.collectionGedanTextOne;
              return;
            }
          }
          this.$store.state.collectionGeshou.push(e);
          Toast("收藏成功！！！");
          this.text = this.$store.state.collectionGedanTextTwo;
        }
      } else {
        Toast("请登录！！！");
      }
    },
    AlbumDetails(id) {
      // console.log('id==>',id);
      this.$router.push({ name: "AlbumDetails", params: { id } });
    },
    Videotiaozhuan(id) {
      this.$router.push({ name: "Video", params: { id } });
    },
    SingerDetailsPage(id) {
      this.DataOne = [];
      this.DataTwo = [];
      this.publishTime = [];
      this.jieshao = [];
      this.beSimilar = [];
      this.alias = "";
      this.id = id;
      // console.log('id==>',id);
      this.$router.push({ name: "SingerDetailsPage", params: { id } });
      this.SingerDetailsPageqingqiu();
      this.SingerDetailsPageqingqiu1();
      // this.SingerDetailsPageqingqiu2();
      this.SingerDetailsPageqingqiu3();
      this.SingerDetailsPageqingqiu4();
    },
    SingerDetailsPageqingqiu() {
      this.axios({
        method: "get",
        url: "/artists?id=" + this.id,
      })
        .then((result) => {
          // console.log("result=0=>", result);
          this.DataOne = result.data.artist;
          this.alias = this.DataOne.alias[0];
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    SingerDetailsPageqingqiu1() {
      this.axios({
        method: "get",
        url: "/artist/album?id=" + this.id + "&limit=500",
      })
        .then((result) => {
          // console.log("result=1=>", result);
          this.DataTwo = result.data.hotAlbums;
          for (let i = 0; i < this.DataTwo.length; i++) {
            let date = this.DataTwo[i].publishTime;
            date = new Date(date);
            let year = date.getFullYear(); // 年
            let month = date.getMonth() + 1; // 月, 月份是从0开始算的 0 - 11
            let data = date.getDate(); // 日

            let hour = date.getHours(); // 时
            let minute = date.getMinutes(); // 分
            let second = date.getSeconds(); // 秒
            // 优化一下，一般在显示 月 日 时分秒的时候我们习惯按照两位的方式去显示；如果数字是一位的我们补齐一个0即可
            month = month < 10 ? "0" + month : month;
            date = date < 10 ? "0" + date : date;
            hour = hour < 10 ? "0" + hour : hour;
            minute = minute < 10 ? "0" + minute : minute;
            second = second < 10 ? "0" + second : second;
            let munder = year + " - " + month + " - " + data;
            this.publishTime.push(munder);
          }
          // console.log('this.publishTime==>',this.publishTime);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    SingerDetailsPageqingqiu2() {
      this.axios({
        method: "get",
        url: "/artist/mv?id=" + this.id,
      })
        .then((result) => {
          // console.log("result=2=>", result.data.mvs);
          this.MVshuju = result.data.mvs;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    SingerDetailsPageqingqiu3() {
      this.axios({
        method: "get",
        url: "/artist/detail?id=" + this.id,
      })
        .then((result) => {
          // console.log("result=3=>", result.data.data.artist);
          this.jieshao = result.data.data.artist;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    SingerDetailsPageqingqiu4() {
      this.axios({
        method: "get",
        url: "/simi/artist?id=" + this.id,
      })
        .then((result) => {
          // console.log("result=4=>", result.data.artists);
          this.beSimilar = result.data.artists;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .van-tabs--line .van-tabs__wrap {
  width: 100%;
  height: 30px;
}
::v-deep .van-tab__pane,
.van-tab__pane-wrapper {
  box-sizing: content-box;
}
.test-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  // border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #b3b3b3;
}
.test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // border-radius: 10px;
  background: #ededed;
}
.pan {
  width: 100%;
  height: 500px;
  text-align: center;
  line-height: 500px;
  font-size: 25px;
  color: #b3b3b3;
}
.SingerDetailsPage {
  width: 100%;
  height: 500px;
  background-color: white;
  overflow-y: scroll;
}
.SingerDetailsPage-one {
  width: calc(100% - 40px);
  height: 180px;
  padding: 20px 20px;
  .one-kuan-one {
    float: left;
    width: 180px;
    height: 180px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }
  .one-kuan-two {
    float: left;
    width: calc(73% - 20px);
    height: 180px;
    padding-left: 20px;
    font-size: 11px;
    color: rgb(63, 63, 63);
    .text-one {
      width: 100%;
      height: 35px;
      font-size: 21px;
      line-height: 35px;
      font-weight: 800;
    }
    .text-two {
      width: 100%;
      height: 30px;
      line-height: 30px;
    }
    .text-three {
      width: 100%;
      height: 50px;
      button {
        width: 100px;
        height: 30px;
        border: 0;
        border-radius: 20px;
        margin-right: 10px;
        margin-top: 10px;
        cursor: pointer;
      }
      .atrive-one {
        color: rgb(255, 255, 255);
        background-color: rgb(245, 112, 112);
      }
      .atrive-one:hover {
        background-color: rgb(233, 106, 106);
      }
      .atrive-two {
        border: 1px solid rgb(36, 36, 36);
        background-color: rgb(255, 255, 255);
      }
      .atrive-two:hover {
        background-color: rgb(236, 236, 236);
      }
    }
    .text-four {
      width: 100%;
      height: 25px;
      line-height: 25px;
    }
  }
}
.SingerDetailsPage-two {
  height: 100%;
  .Page-two {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    padding: 20px;
  }
  .Album-kuan {
    float: left;
    width: calc(20% - 10px);
    height: 165px;
    padding: 5px;
    cursor: pointer;
    .Album-img {
      width: 100%;
      height: 125px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .Album-text {
      .Album-text-one {
        width: 100%;
        height: 25px;
        font-weight: 300;
        font-size: 12px;
        line-height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .Album-text-two {
        width: 100%;
        height: 15px;
        line-height: 15px;
        // text-align: right;
        color: rgb(95, 95, 95);
      }
    }
  }
  .jieshao-one {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
  }
  .jieshao-two {
    width: 100%;
    font-size: 11px;
    line-height: 15px;
  }
  .beSimilar-kuan {
    float: left;
    width: calc(20% - 10px);
    height: 150px;
    padding: 5px;
    cursor: pointer;
    .beSimilar-img {
      width: 100%;
      height: 125px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .beSimilar-text {
      .beSimilar-text-one {
        width: 100%;
        height: 25px;
        font-weight: 300;
        font-size: 12px;
        line-height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .MV-kuan {
    float: left;
    width: calc(33% - 10px);
    height: 130px;
    padding: 5px;
    cursor: pointer;
    .MV-img {
      width: 100%;
      height: 105px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .MV-text {
      .MV-text-one {
        width: 100%;
        height: 25px;
        font-weight: 300;
        font-size: 11px;
        line-height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.clear {
  clear: both;
  width: 100%;
  height: 1px;
}
</style>